<template>
  <div>
    <!-- 把 isOK 取反，然后后赋值 -->
    <button @click=" isOk = !isOk ">布尔值取反{{isOk}}</button>
    <!-- v-show 用的display:none隐藏或显示   (频繁切换使用) -->
    <h1 v-show="isOk">这是v-show的盒子</h1>
    <!-- v-if  直接从DOM树上创建或移除 -->
    <h1 v-if="isOk">这是v-if的盒子</h1>
    <div>
      <p v-if="age>=18">已成年</p>
      <p v-else>未成年</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isOk: true,
      age: 18,
    };
  },
};
</script>

<style>
</style>